import React, { useState, useEffect } from 'react'
import {
    Space, Table, Tag, message, Popconfirm, Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
} from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/lib/table';
import axios from 'axios';
const { Search } = Input;

const suffix = (
    <AudioOutlined
        style={{
            fontSize: 16,
            color: '#1890ff',
        }}
    />
);
type SizeType = Parameters<typeof Form>[0]['size'];
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];



const MyTable: React.FC = () => {
    const [serchText, setSerchText] = useState<string>('');
    const [total, setTotal] = useState(20);
    const [page, setpage] = useState<number>(1);
    const [pageSize, setpageSize] = useState(6)

    const onSearch = async (val: string) => {

    };
    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };

    const ChangeText = (val: string) => {
        setSerchText(val);
    };
    const confirm = (e?: React.MouseEvent<HTMLElement>) => {
        console.log(e);
        message.success('Click on Yes');
    };
    const cancel = (e?: React.MouseEvent<HTMLElement>) => {
        console.log(e);
        message.error('Click on No');
    };
    const columns: ColumnsType<DataType> = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, { tags }) => (
                <>
                    {tags.map(tag => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Popconfirm
                        title="Are you sure to delete this task?"
                        onConfirm={confirm}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a>删除</a>
                    </Popconfirm>

                </Space>
            ),
        },
    ];
    const fetchData = async () => {
        // axios.get("/api/table",{
        //     params:{
        //        text: serchText,
        //        page,
        //        pageSize,
        //     }
        // })
        console.log('data', serchText);

    }
    useEffect(() => {
        fetchData();
    }, [page, pageSize]);
    const onFinish = (val: any) => {
        console.log(val);
    }
    return (
        <div>
            <Search placeholder="input search text" value={serchText} onChange={(e) => ChangeText(e.target.value)} onSearch={onSearch} style={{ width: 200 }} />
            <Table columns={columns} dataSource={data}
                pagination={
                    {
                        onChange: (page: number, pageSize: number) => {
                            console.log(page, pageSize);
                            setpage(page);
                        },
                        total: total,
                        pageSize: pageSize,
                    }

                }
            />
            <Form
                onFinish={onFinish}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                initialValues={{ size: componentSize }}
                onValuesChange={onFormLayoutChange}
                size={componentSize as SizeType}
            >
                <Form.Item label="Form Size" name="size">
                    <Radio.Group>
                        <Radio.Button value="small">Small</Radio.Button>
                        <Radio.Button value="default">Default</Radio.Button>
                        <Radio.Button value="large">Large</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="Input">
                    <Input />
                </Form.Item>
                <Form.Item label="Select">
                    <Select>
                        <Select.Option value="demo">Demo</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="TreeSelect">
                    <TreeSelect
                        treeData={[
                            { title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] },
                        ]}
                    />
                </Form.Item>
                <Form.Item label="Cascader">
                    <Cascader
                        options={[
                            {
                                value: 'zhejiang',
                                label: 'Zhejiang',
                                children: [
                                    {
                                        value: 'hangzhou',
                                        label: 'Hangzhou',
                                    },
                                ],
                            },
                        ]}
                    />
                </Form.Item>
                <Form.Item name="time"  label="DatePicker">
                    <DatePicker format={"YYYY/MM/DD"} />
                </Form.Item>
                <Form.Item name="unputNumber" label="InputNumber" >
                    <InputNumber />
                </Form.Item>
                <Form.Item label="Switch" valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item label="Button">
                    <Button>Button</Button>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        Submit11
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
export default MyTable;
